<template>
  <div class="app-container">
  <div class="filter-container">

        <el-button type="primary" icon="el-icon-search" @click="handleRefresh()" style="margin-left:0px;">刷 新</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="scope">
            <el-form label-position="left" inline class="demo-table-expand">
                <el-table style="width:100%" :data="scope.row.children"
                    border fit highlight-current-row stripe >
                    <el-table-column  min-width="100" align="center" label="名称">
                        <template slot-scope="scope2">
                            <span>{{ scope2.row.name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="值">
                        <template slot-scope="scope2">
                            <span>{{ scope2.row.value }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="100" align="center" label="日期">
                        <template slot-scope="scope2">
                            <span>{{ scope2.row.createtime }}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column align="center" label="操作"  width="200">
                        <template slot-scope="scope2">
                            <el-button type="primary" size="small" @click="dgChildModifyClick(scope2.row.id)">修改</el-button>
                            <el-button type="danger" size="small" @click="dgChildDeleteClick(scope2.row.id)">删除</el-button>
                        </template>
                    </el-table-column> -->
                </el-table>
            </el-form>
        </template>
      </el-table-column>
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>
     <el-table-column  min-width="100" align="center" label="属性名称">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.state }}</span>
        </template>
      </el-table-column>

      <el-table-column  min-width="100" align="center" label="日期">
        <template slot-scope="scope">
          <span>{{ scope.row.createtime | parseTime('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      
      <el-table-column align="center" label="操作"  width="380" fixed="right">
        <template slot-scope="scope">
            <el-button :type="['warning','danger'][scope.row.state]" size="small" @click="enableClick(scope.row.id)">{{['启用','禁用'][scope.row.state]}}</el-button>
            <el-button type="danger" size="small" @click="modifyClick(scope.row.id)">修改</el-button>
          
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="fetchData" />

<!-- 修改 -->
<el-dialog :title="dialogModify.title" :visible.sync="dialogModify.visible"  width="900px">
    <div class="ci">
        <div class="item" style="justify-content:flex-end;">
            <el-button type="primary" icon="el-icon-plus" @click="dgAddClick()" style="margin-right:10px;" >新增</el-button>
        </div>
        <div class="item" v-show="dialogModify.showAdd" style="margin-bottom:10px; height:80px; padding-left:20px;">
            <el-input  v-model="dialogModify.data.name" placeholder="名称" style="width:220px;"></el-input>
            <el-input type="number" v-model="dialogModify.data.value" placeholder="" style="width:180px;margin-left:10px;"></el-input>
            <el-button type="primary" class="small" @click="dgSaveClick()" style="margin-left:10px;" :loading="dialogModify.saveloading">保存</el-button>
        </div>

        <div class="item  hauto" style="padding-bottom:10px;">
            <el-table v-loading="dialogModify.listLoading" :data="dialogModify.list" 
                border fit highlight-current-row stripe
                style="width: 100%">
                <el-table-column align="center" label="序" width="80">
                    <template slot-scope="scope">
                    <span>{{ scope.row._id }}</span>
                    </template>
                </el-table-column>
                <el-table-column  min-width="100" align="center" label="名称">
                    <template slot-scope="scope">
                    <span>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column  min-width="100" align="center" label="值">
                    <template slot-scope="scope">
                    <span>{{ scope.row.value }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作"  width="200" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="primary" size="small" @click="dgModifyClick(scope.row.id)">编辑</el-button>
                        <el-button type="danger" size="small" @click="dgDeleteClick(scope.row.id)">删除</el-button>
                    
                    </template>
                </el-table-column>
            </el-table>
        </div>
        
        
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogModify.visible = false">关 闭</el-button>
    </div>
</el-dialog>
<!-- end 修改 -->



  </div>
</template>

<script>
import * as settingApi from '@/api/presale/setting'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import * as enumHelper from '@/utils/enum'

export default {
    components: { Pagination },
    data(){
        return{
          search:{ 
          },
          listQuery: {
                page: 1,
                rows: 20,
                name:'',
                phone:'',
                state:-1,
                daterange:''
          },
          list:null,
          listLoading:false,
          total:0,
          selectOptions:{
          },

          dialogModify:{
              visible:false,
              saveloading:false,
              title:'修改',
              data:{
                  id:'',
                  name:'',
                  value:''
              },
              listLoading:false,
              list:null,
              showAdd:false,
          },

          
        }
    },
    created(){
        var that=this;
        
        that.fetchData();
    },
    filters:{

    },
    methods:{
        fetchData(){
          var that=this;
            settingApi.getAttrList({}).then(res=>{
                console.log(res.data)
              if(res.data){
                that.list=[...res.data.items.map((item,index)=>{
                  item._id=index+1;
                  return item;
                })];
                that.total=res.data.total;
              }
            })
        },
        handleRefresh(){
            this.fetchData();
        },
        enableClick(id){
          var that=this;
          var index=that.list.findIndex(o=>o.id==id);
          that.list[index].state=that.list[index].state?0:1;
        },
        modifyClick(id){
          var that=this;
          var selectItem=that.list.filter(o=>o.id==id)[0];
          that.dialogModify.list=selectItem.children.map((item,index)=>{
              item._id=index+1;
              return item;
          });
          that.dialogModify.visible=true;
        },
        dgAddClick(){
          var that=this;
          that.dialogModify.data.id='';
          that.dialogModify.data.name='';
          that.dialogModify.data.value='';
          that.dialogModify.showAdd=true;
        },
        dgSaveClick(){
            var that=this;
            that.dialogModify.saveloading=true;
            if(!that.dialogModify.list){that.dialogModify.list=[];}
            var isNew=that.dialogModify.data.id=='';
            if(isNew){
                that.dialogModify.list.push({
                    _id:that.dialogModify.list.length+1,
                    id:parseInt(Math.random()*100000),
                    name:that.dialogModify.data.name,
                    value:that.dialogModify.data.value,
                });
            }else{
                var index=that.dialogModify.list.findIndex(o=>o.id==that.dialogModify.data.id);
                that.dialogModify.list[index].name=that.dialogModify.data.name;
                that.dialogModify.list[index].value=that.dialogModify.data.value;
            }

            setTimeout(()=>{
                that.dialogModify.data.name='';
                that.dialogModify.data.value='';
                that.dialogModify.saveloading=false;
                setTimeout(()=>{
                    that.dialogModify.showAdd=false;
                })
                
            },1000)
        },
        dgModifyClick(id){
            var that=this;
            var selectItem=that.dialogModify.list.filter(o=>o.id==id)[0];
            that.dialogModify.data.id=selectItem.id;
            that.dialogModify.data.name=selectItem.name;
            that.dialogModify.data.value=selectItem.value;
            that.dialogModify.showAdd=true;
        },
        dgDeleteClick(id){
            var that=this;
            var index=that.dialogModify.list.findIndex(o=>o.id==id);
            that.dialogModify.list.splice(index,1);

        }
        
    }
}
</script>

<style>

</style>